<div ng-controller="AdminDirectoryCtrl as vm">
<section class="content-header">
    <!-- Content Header (Page header) -->
    Directory Summary
   <a  href="/api/dir/export" class="btn btn-primary pull-right" >Export GC Directory</a>


</section>
<!-- Main content -->
<section class="content">
    <div class="row">
		<div class="col-md-12">
			<div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Directory summary report</h3>

                    <div class="pull-right">
                            <form class="form-inline">
                                <div class="form-group">
                                    <select class="form-control" ng-options="div.name for div in regions track by div.id" ng-model="vm.region" ng-change="vm.regionChange()">
                                        <option ng-if="role!='Sub-Region Admin'" value="">--- Sub-Region ---</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <select class="form-control" ng-options="div.name for div in clusters track by div.id" ng-model="vm.cluster" ng-change="vm.loadData()">
                                        <option value="">--- Cluster ---</option>
                                    </select>
                                </div>
                            </form>
                        </div>
                </div>
                <div class="box-body table-responsive no-padding" >

                				
                            <table ng-table="vm.tableParams" class="table table-hover table-bordered table-condensed" template-header="customHeader.html"  show-filter="true">
                            	
                            	<tr ng-repeat="ret in $data">
                        		<td  title="'Hotel Name'" filter="{ hotel: 'text'}" sortable="'hotel'">
					            {{ret.hotel}}</td>
						        <td title="'Hotel Name in Chinese'" filter="{ hotelName: 'text'}" sortable="'hotelName'">
						            {{ret.hotelName}}</td>
						       <td title="'Hotel Address'" filter="{ hotelAddress: 'text'}" sortable="'hotelAddress'">
						            {{ret.hotelAddress}}</td>
						         <td title="'Postal code'" filter="{ postal: 'text'}" sortable="'postal'">
						            {{ret.postal}}</td>
						         <td title="'Name'" filter="{ hr.name: 'text'}" sortable="'hr.name'">
						            {{ret.hr.name}}</td>
						        <td filter="{ hr.position: 'text'}" sortable="'hr.position'">
						            {{ret.hr.position}}</td>
						        <td filter="{ hr.email: 'text'}" sortable="'hr.email'">
						            {{ret.hr.email}}</td>
						        <td filter="{ hr.oline: 'text'}" sortable="'hr.oline'">
						            {{ret.hr.oline}}</td>
						        <td filter="{ hr.mobile: 'text'}" sortable="'hr.mobile'">
						            {{ret.hr.mobile}}</td>
						        <td filter="{ hr.birthday: 'text'}" sortable="'hr.birthday'">
						            {{ret.hr.birthday | date:'MMM dd'}}</td>
						        <td title="'Name'" filter="{ tr.name: 'text'}" sortable="'tr.name'">
						            {{ret.tr.name}}</td>
						        <td filter="{ tr.position: 'text'}" sortable="'tr.position'">
						            {{ret.tr.position}}</td>
						        <td filter="{ tr.email: 'text'}" sortable="'tr.email'">
						            {{ret.tr.email}}</td>
						        <td filter="{ tr.oline: 'text'}" sortable="'tr.oline'">
						            {{ret.tr.oline}}</td>
						        <td filter="{ tr.mobile: 'text'}" sortable="'tr.mobile'">
						            {{ret.tr.mobile}}</td>
						        <td filter="{ tr.birthday: 'text'}" sortable="'tr.birthday'">
						            {{ret.tr.birthday | date:'MMM dd'}}</td>
						        									            
						    </tr>
                       
                            </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
		</div>
    </div>

</section>
<script type="text/ng-template" id="customHeader.html">
    <tr>	
                            		<th rowspan="2" width="10%">Hotel Name</th>
                                    <th rowspan="2" width="10%" >Hotel Name in Chinese</th>
                                    <th rowspan="2" width="17%" >Hotel Address</th>
                                    <th rowspan="2" width="5%" >Postal Code</th>
                                    <th colspan="6" class="text-center" width="29%">HR Leader</th>
                            		<th colspan="6" class="text-center" width="29%">Training Leader</th>
                            	</tr>
                            	<tr>	
                            		
                            		<th>Name</th>
                            		<th>Position</th>
                            		<th>Email address</th>
                            		<th>Office Line</th>
                            		<th>Mobile</th>
                            		<th>Birthday</th>
                            		<th>Name</th>
                            		<th>Position</th>
                            		<th>Email address</th>
                            		<th>Office Line</th>
                            		<th>Mobile</th>
                            		<th>Birthday</th>
                            	</tr>
  </script>

</div>